<template>
    <Page class="basic company">
        <template #header>
            <EdSelect v-model="params.villageId" :selectParams="projectNameParams" @emit-select-value="projectChange"></EdSelect>
            <EdSelect v-model="params.patrolType" :selectParams="patrolTypeParams"></EdSelect>
            <el-input placeholder="计划名称" v-model="params.planName"></el-input>
            <!-- <EdDateTimePicker ref="edDateTimePickerRef" :pickerParams="pickerParams" @emit-echo-time-date="emitEchoTimeDate"></EdDateTimePicker> -->
            <el-button class="ed-button ed_black-bottom"  @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg"/>重置</el-button>
        </template>
        <PageCard title="巡检计划列表">
            <template #actions>
                <el-button icon="el-icon-plus" class="ed-button ed_black-bottom ed-button36" @click="add()" size="small" v-has="'patrol:plan:add'">新增</el-button>
            </template>
            <ApiTable :api="tableApi" ref="table" :params="params">
                <el-table-column :show-overflow-tooltip="true" prop="villageName" label="项目名称"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="planName" label="计划名称"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" :formatter="setDicType" label="巡检类型">
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" label="巡检点位">
                    <template slot-scope="scope">
                        <span>{{scope.row.locationNum}}个点位</span>
                        (<span v-for="(item,index) in scope.row.planLocationDTOList" :key="item.id">{{ index == scope.row.planLocationDTOList.length-1 && item.name || (item.name + '、') }}</span>)
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true"  label="时间">
                    <template slot-scope="scope">
                        <span>每天：</span>
                        <!-- <span>{{scope.row.period.startTime +'-'+ scope.row.period.endTime}}</span> -->
                        <span v-for="(item,index) in scope.row.periodList" :key="index">
                        {{ index == scope.row.periodList.length-1 && item.startTime +'-'+ item.endTime || (item.startTime +'-'+ item.endTime + '、') }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="" label="操作">
                    <template slot-scope="scope">
                        <el-button class="ed-table-bottom ed_black_border" @click="edit(scope.row)" v-has="'patrol:plan:update'">编辑</el-button>
                        <el-button class="ed-table-bottom ed_delete_border"  @click="del(scope.row)" v-has="'patrol:plan:delete'">删除</el-button>
                    </template>
                </el-table-column>
            </ApiTable>
        </PageCard>
        <ed-confirm-delete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue()"></ed-confirm-delete>
       
    </Page>
    
</template>

<script>
import {planList,deletePlanList,projectList} from "./api.js";
import Page from '../../components/Page.vue'
import PageCard from 'src/views/components/PageCard.vue'
import ApiTable from 'src/components/ApiTable.vue'
import EdSelect from 'src/components/EdSelect.vue'
import EdDialog from 'src/components/EdDialog.vue'
import { defineComponent } from 'vue'
import EdConfirmDelete from "src/components/EdConfirmDelete.vue";
import {getDictByCode} from "src/api/dictionaries";
export default defineComponent({
    name: 'project',
    components: { Page, PageCard, ApiTable, EdSelect, EdDialog,EdConfirmDelete,},
    data() {
        return {
            params: {
                projectName:'',
                patrolType:"",
                villageId:'',
                villageName:'',
                planName:''
            },
            confirmRow: '',
            showCode:false,
            pickerParams:{
                placeholder:"请选择所属公司"
            },
            projectNameParams:{
                placeholder:"项目名称",
                options: [],
            },
            patrolTypeParams:{
                placeholder:"请选择巡检类型",
                options: [],
                // props: {label:"label", value:"value"}
            },
            centerDialogVisible:false,
            mult:[]
        }
    },
    activated(){
        this.$nextTick(()=>{
                this.$refs.table.load()
                this.initDic()
        })
        // 获取字典值方式
        getDictByCode("patrolType").then(response => {
            if(response.success) {
                this.patrolTypeParams.options=response.data.items
            }
        })
    },
    methods: {
        tableApi:planList,
        initDic() {
            projectList({page:1,pageSize:999999}).then(response => {
                    if(response.success) {
                        let options = response.data.records.map(x=>{return {label:x.villageName,value:x.villageId}})
                        this.projectNameParams.options=options
                    }
                })
        },  
        setDicType(row ,cloumn) {
            let options = this.patrolTypeParams.options.find(x => x.value == row.patrolType)
            return options ? options.label : ''
        },  
        search(){
            this.$refs.table.load(1)
        },
        reset(){
            this.params = {
                projectName:'',
                patrolType:"",
                villageId:'',
                planName:''
            }
            this.$nextTick(()=>{
                this.$refs.table.load(1,10)
            })
        },
        closeDialog(){
            this.showCode = false
        },
        saveDialog(){
            this.showCode = false
        },
        add(){
            this.$router.push({
                path: '/patrol/plan/planAdd'
            })
        },
        del(row){
            this.confirmRow = row;
            this.$refs.confirmDeleteRef.open("操作确认","是否执行此操作？","warning")
        },
        confirmDeleteTrue(){
                deletePlanList({id: this.confirmRow.id}).then(response => {
                    if(response.success) {
                        this.$message.success({
                            message: '计划删除成功！',
                            duration: 2000,
                            center:true
                        });
                        this.$refs.table.load()
                    }
                })
        },
        erweiCode(){
            this.centerDialogVisible=true
        },
        edit(row){        
            this.$router.push({
                path: '/patrol/plan/planUpdate',
                query: {id:row.id}
            })
        },
        projectChange(row) {
                let option = this.projectNameParams.options.find(x=>x.value==row)
                this.params.villageName = option.label
            }
  
    }
})
</script>

<style lang="scss" scoped>
.erweicodeCenter{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>